<template>
  <div>
    <!-- data是表格的数据 -->
    <!-- border 是否显示边框 -->
    <!-- stripe 斑马纹 -->
    <el-table :data="tableData" border stripe style="width: 100%">
      <!-- el-table-column中的prop是这一列要显示的字段名 -->
      <el-table-column prop="playCount" label="播放次数" width="100">
      </el-table-column>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="address" width="130" label="封面">
        <!-- 作用域插槽 1要显示图片，这是一个额外的标签；2图片地址是变量，每一行都不一样 -->
        <template slot-scope="scope">
          <img :src="scope.row.coverImgUrl" width="120" />
        </template>
      </el-table-column>
      <el-table-column prop="address" width="80" label="操作">
        <template slot-scope="scope">
          <!-- circle 圆形按钮，省空间；round 圆角按钮 -->
          <el-button
            type="primary"
            icon="el-icon-link"
            @click="detail(scope.row.id)"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.$http("/user/playlist?uid=32953014")
      .then(
        (res) => {
          this.tableData = res.playlist;
        }
      );
    },
    detail(id) {
      this.$router.push('/play/'+id)
    },
  },
};
</script>

<style>
</style>